<%--
  Created by IntelliJ IDEA.
  User: 22181
  Date: 2025/6/3
  Time: 22:48
  To change this template use File | Settings | File Templates.
--%>
<%--<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-2.2.3.min.js"></script>
<html>
<head>
    <title>图片上传</title>
</head>
<body>
<form action="upload" method="post" enctype="multipart/form-data">
  <fieldset>
    文件： <input type="file" name="file" size="20"><br/>
    文件描述： <input type="text" name="desc" size="20"><br/>
    <input type="submit" value="文件上传">
  </fieldset>
</form>
</body>
</html>--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-2.2.3.min.js"></script>
<html>
<head>
  <title>图片上传</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    }

    body {
      background: linear-gradient(135deg, #fae18e 0%, #e4edf5 100%);
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
    }

    .upload-container {
      width: 100%;
      max-width: 500px;
      background: white;
      border-radius: 16px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
      padding: 40px;
      text-align: center;
      animation: fadeIn 0.6s ease-out;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .upload-header {
      margin-bottom: 30px;
    }

    .upload-icon {
      width: 80px;
      height: 80px;
      background: linear-gradient(135deg, #cb2711 0%, #fcca25 100%);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
      box-shadow: 0 8px 20px rgba(67, 97, 238, 0.3);
    }

    .upload-icon svg {
      width: 40px;
      height: 40px;
      fill: white;
    }

    h1 {
      color: #2b2d42;
      font-size: 28px;
      margin-bottom: 10px;
    }

    .subtitle {
      color: #6c757d;
      font-size: 16px;
      max-width: 300px;
      margin: 0 auto;
      line-height: 1.6;
    }

    .upload-form {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .form-group {
      text-align: left;
    }

    label {
      display: block;
      margin-bottom: 8px;
      color: #2b2d42;
      font-weight: 500;
      font-size: 15px;
    }

    .input-field {
      width: 100%;
      padding: 14px 18px;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      font-size: 16px;
      transition: all 0.3s ease;
    }

    .input-field:focus {
      border-color: #4361ee;
      outline: none;
      box-shadow: 0 0 0 4px rgba(67, 97, 238, 0.15);
    }

    .file-input-container {
      position: relative;
    }


    .file-input-container:hover::before {
      background: #e6edf7;
    }

    .file-input {
      width: 100%;
      padding: 14px;
      background: #f8fafc;
      border: 2px dashed #cbd5e0;
      border-radius: 12px;
      cursor: pointer;
      color: #64748b;
      font-size: 15px;
      transition: all 0.3s ease;
    }

    .file-input:hover {
      border-color: #94a3b8;
      background: #f1f5f9;
    }

    .submit-btn {
      background: linear-gradient(135deg, #cb2711 0%, #fcca25 100%);
      color: white;
      border: none;
      padding: 16px;
      font-size: 17px;
      font-weight: 600;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 5px 15px rgba(67, 97, 238, 0.3);
      margin-top: 10px;
    }

    .submit-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(67, 97, 238, 0.4);
    }

    .submit-btn:active {
      transform: translateY(1px);
    }

    .file-info {
      background: #f1f5f9;
      border-radius: 10px;
      padding: 12px 16px;
      margin-top: 10px;
      font-size: 14px;
      color: #475569;
      text-align: left;
      display: none;
    }

    .file-info span {
      font-weight: 500;
      color: #4361ee;
    }

    .preview-container {
      margin-top: 20px;
      display: none;
    }

    .preview-container img {
      max-width: 100%;
      border-radius: 12px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    }

    @media (max-width: 600px) {
      .upload-container {
        padding: 30px 20px;
      }

      .upload-icon {
        width: 70px;
        height: 70px;
      }

      h1 {
        font-size: 24px;
      }

      .subtitle {
        font-size: 15px;
      }

      .input-field {
        padding: 12px 16px;
      }
    }
  </style>
</head>
<body>
<div class="upload-container">
  <div class="upload-header">
    <div class="upload-icon">
      <svg viewBox="0 0 24 24">
        <path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"></path>
      </svg>
    </div>
    <h1>图片上传</h1>
  </div>

  <form action="upload" method="post" enctype="multipart/form-data" class="upload-form">
    <div class="form-group">
      <label for="file">选择图片</label>
      <div class="file-input-container">
        <input type="file" name="file" id="file" class="file-input" accept="image/*">
      </div>
      <div class="file-info" id="fileInfo">
        已选择: <span id="fileName">未选择文件</span>
      </div>
      <div class="preview-container" id="previewContainer">
        <img id="imagePreview" alt="图片预览">
      </div>
    </div>

    <div class="form-group">
      <label for="desc">图片描述</label>
      <input type="text" name="desc" id="desc" class="input-field" placeholder="请输入图片描述">
    </div>

    <button type="submit" class="submit-btn">上传图片</button>
  </form>
</div>

<script>
  $(document).ready(function() {
    const fileInput = $('#file');
    const fileInfo = $('#fileInfo');
    const fileName = $('#fileName');
    const previewContainer = $('#previewContainer');
    const imagePreview = $('#imagePreview');

    // 文件选择处理
    fileInput.on('change', function() {
      if (this.files && this.files[0]) {
        const file = this.files[0];

        // 显示文件信息
        fileName.text(file.name);
        fileInfo.show();

        // 显示图片预览
        const reader = new FileReader();
        reader.onload = function(e) {
          imagePreview.attr('src', e.target.result);
          previewContainer.show();
        };
        reader.readAsDataURL(file);
      }
    });

    // 表单提交时添加简单动画
    $('form').on('submit', function() {
      $('.submit-btn').html('上传中...');
      $('.submit-btn').css('opacity', '0.8');
    });
  });
</script>
</body>
</html>